<div class="db">

  <div class="p-4">

    <div class="row">

      <div class="col-6 ">
      <div class="rounded-4 shadow-lg my-3 p-2" style="background-color: #fcec52">
        <div class="d-flex justify-content-between m-0 p-0">
          <div>
            <button mat-mini-fab color="white">
              <mat-icon>visibility</mat-icon>
            </button>

            <button class="mx-4" mat-mini-fab color="white">
              <mat-icon>edit</mat-icon>
            </button>
          </div>

          <div>
            <button mat-mini-fab color="white">
              <mat-icon>visibility</mat-icon>
            </button>

            <button class="mx-4" mat-mini-fab color="white">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-mini-fab color="white">
              <mat-icon>delete</mat-icon>
            </button>
          </div>

        </div>
      </div>
    </div>

      <div class="col-6 ">
        <div class="rounded-4 shadow-lg my-3 p-2" style="background-color: #fcec52">
          <div class="d-flex justify-content-between m-0 p-0">
            <div>
              <input [(ngModel)]="dayLife" class="form-control" placeholder="Срок разрешения (дн.)">
            </div>

            <div>
                <button class="rounded-3" mat-raised-button color="white" (click)="openDialog()">ПОДТВЕРДИТЬ</button>
            </div>

          </div>
        </div>
      </div>

    </div>
    <div class="row">


      <div class="col-3 shadow-lg rounded-4 bg-dark p-3 m-1">

        <h2 class="text-white m-2">Сейфы</h2>
        <form>
          <mat-form-field class="example-chip-list" >
            <mat-chip-grid #chipGrid >
              @for (safe of safes; track safe) {
              <mat-chip-row (removed)="remove(safe)">
              {{safe.title}}
              <button matChipRemove [attr.aria-label]="'удалить ' + safe">
                <mat-icon>cancel</mat-icon>
              </button>
            </mat-chip-row>
              }
            </mat-chip-grid>
            <input placeholder="Поиск сейфа" #fruitInput [formControl]="fruitCtrl"
                   [matChipInputFor]="chipGrid" [matAutocomplete]="auto"
                   [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                   (matChipInputTokenEnd)="add($event)"/>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
              @for (s of filteredSafes | async; track s) {
              <mat-option [value]="s">{{s.title}}</mat-option>
              }
            </mat-autocomplete>
          </mat-form-field>
        </form>
      </div>


      <div class="col-3">
        <app-user-selector (sendSelectedUsersEvent)="receiveSelectedUsers($event)" ></app-user-selector>
      </div>


      <div class="col px-0 mx-0">
        <app-permision-selector (sendSelectedPerEvent)="receiveSelectedPermissions($event)"></app-permision-selector>
      </div>


    </div>
  </div>



</div>
